<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cool Cloud</title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
    <!-- IonIcons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/adminlte.min.css">
    <!--右键弹出菜单-->
    <link rel="stylesheet" href="dist/js/xcConfirm/css/xcConfirm.css">
    <link rel="stylesheet" href="dist/js/context-menu/css/contextMenu.css">
    <!--图片预览-->
    <link rel="stylesheet" href="dist/css/viewpic.css">
    <!--  分页-->
    <link rel="stylesheet" href="dist/css/zxf_page.css">
    <!-- bootstrap选择-->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
    <style>
        .main-card {
            max-width: 15rem;
            background-color: #fff;
            margin: 0 auto;
            border-radius: 10px;
            padding: 0 0 0 0;
            -webkit-transition: all 0.6s ease-in-out;
            -moz-transition: all 0.6s ease-in-out;
            -ms-transition: all 0.6s ease-in-out;
            -o-transition: all 0.6s ease-in-out;
            transition: all 0.6s ease-in-out;
        }
        .main-card:hover {
            transform: translateY(-0.5rem) scale(1.0125);
            box-shadow: 0 0.5em 3rem -1rem rgba(0, 0, 0, 0.5);
        }
        .photo {
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
            border-radius: 10px 10px 0 0;
        }
        .editname {
            color: #3e3e3e;
            font-size: 14px;
        }
        .tipmsg1,
        .tipmsg {
            background-color: #f39c12;
            position: absolute;
            z-index: 100;
            top: 30px;
            right: 3%;
            padding: 5px 5px 5px 5px;
            border-radius: 15px;
            border: 2px solid #ddd;
            box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
            color: white;
        }
        .modal-dialog {
            top: 40%;
        }
    </style>
</head>
<body class="hold-transition sidebar-mini">
<!-- wrapper -->
<div class="wrapper">
    <!-- Navbar -->
    <div th:replace="common/header :: header"></div>

    <!-- Main Sidebar Container -->
    <div th:replace="common/menu :: sidebar"></div>

    <!-- Content Wrapper. Contains page content -->
    <div th:replace="content/imageContent :: imagecontent"></div>

    <!-- /Footer -->
    <div th:replace="common/footer :: footer"></div>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark"></aside>
</div>


<!--编辑个人信息-->
<div th:replace="common/editInforModel :: editinfo"></div>
<!--分享按钮-->
<button type="button" class="share" data-toggle="modal" data-target="#creatShare" style="display: none"></button>
<div id="creatShare" class="modal fade" style="margin-top: -10%" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">创建分享</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="form">
                    <!-- Single button -->
                    <div class="btn-group group1">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            是否加密<span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li style="text-align: center"><a href="javascript:opendecrypt()">开启</a></li>
                            <li style="text-align: center"><a href="javascript:closedecrypt()">关闭</a></li>
                        </ul>
                    </div>
                    <h1></h1>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            是否自动过期<span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li style="text-align: center"><a href="javascript:opendate()">开启</a></li>
                            <li style="text-align: center"><a href="javascript:closedate()">关闭</a></li>
                        </ul>
                        <div class="group2" style="display: none">
                            <select class="selectpicker">
                                <option value="1">五分钟后过期</option>
                                <option value="2">一小时后过期</option>
                                <option value="3">一天后过期</option>
                                <option value="4">一星期后过期</option>
                                <option value="5">一个月后过期</option>
                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="createShare()" class="btn btn-primary">创建</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!--右键弹出菜单-->
<script src="dist/js/context-menu/js/jquery.contextMenu.min.js"></script>
<script src="dist/js/xcConfirm/js/xcConfirm.js"></script>
<!--图片浏览-->
<script src="dist/js/viewpic.js"></script>
<!--bootstrap选择-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<!--邀请注册-->
<script src="dist/js/invite.js"></script>
<!--搜索-->
<script src="dist/js/search.js"></script>
<!--分页-->
<script type="text/javascript" src="dist/js/zxf_page.js"></script>
<script>

    //翻页
    $(".zxf_pagediv").createPage({
        pageNum: $('#pageNum').html(),
        current: $('#current').html(),
        backfun: function (e) {
            var location = window.location.href;
            let strings = location.split("coolcloud");
            console.log(strings[0]);
            window.location.href = strings[0] + "coolcloud/file-image?cur=" + e['current'];
        }
    });

    function editMyInfo() {
        $(".userName").val("[[${session.loginUser.userName}]]");
        $(".edit").click();
    }

    function submit() {
        let userName = $(".userName").val();
        let IwtNewPsd = $(".IwtNewPsd").val();
        let IwtOralPsd = $(".IwtOralPsd").val();
        let id = [[${session.loginUser.userId}]];
        console.log(userName, id, IwtNewPsd, IwtOralPsd)
        if (userName == '') {
            alert("用户名不能为空！");
            return;
        }
        if ((IwtNewPsd == '' && IwtOralPsd != '') || (IwtNewPsd != '' && IwtOralPsd == '')) {
            alert("需要修改密码,原密码与新密码均不能为空！");
            return;
        }
        $.ajax({
            url: "UpdateInfo",
            type: "POST",
            data: {
                "id": id,
                "username": userName,
                "IwtNewPsd": IwtNewPsd,
                "IwtOralPsd": IwtOralPsd
            },
            success: function (date) {
                if (date.status == "psdwrong") {
                    alert("原密码错误！")
                } else if (date.status == "success" && IwtNewPsd != '') {
                    $("#logout").click();
                } else if (date.status == "success" && IwtNewPsd == '') {
                    $(".tipmsg1").html($('<span  style="margin-right: 25px">  用户名修改成功！</span><i class="fas fa-times" onclick="closeTip1()"></i>'));
                    $(".tipmsg1").show();
                    $('.close').click();
                    setInterval("location.reload( )", 1000);
                }
            }
        })
    }

    $(function () {
        $('.files').hover(function () {
            let id = $(this).children("#tempid").html();
            let name = $(this).children("#tempname").html();
            $('#fileid').html(id);
            $('#filename').html(name);
            $(this).siblings().removeClass('flag');
            $(this).addClass('flag');
        }, function () {
        });
    });
    let isopendecrypt = 0;

    function opendecrypt() {
        if (isopendecrypt == 0) {
            $('.group1').append("<input type='text' class='form-control' name='decryptpsd' placeholder='四位加密密码：' onblur='checkLen()'>");
            isopendecrypt++;
        }
    }

    function closedecrypt() {
        if (isopendecrypt == 1) {
            $("input[name='decryptpsd']").remove();
            isopendecrypt--;
        }
    }

    function checkLen() {
        let text = $("input[name='decryptpsd']").val();
        if (text.length > 4) {
            $("input[name='decryptpsd']").val(text.slice(0, 4));
        }
    }

    let isopendateend = 0;

    function opendate() {
        isopendateend++;
        $(".group2").show();
    }

    function closedate() {
        isopendateend--;
        $(".group2").hide();
    }

    function createShare() {
        let fileid = $('#fileid').html();
        let req = "fileId=" + fileid + "&url=" + window.location.href.split("coolcloud")[0] + "coolcloud/";
        //开启时间过期
        if (isopendateend == 1) {
            req += "&isOpenEnddate=" + isopendateend + "&endDateType=" + $('.selectpicker').selectpicker().val();
        } else {
            req += "&isOpenEnddate=" + isopendateend;
        }
        //开启加密
        if (isopendecrypt == 1) {
            req += "&isOpenDecrypt=" + isopendecrypt + "&decrypt=" + $("input[name='decryptpsd']").val();
        } else {
            req += "&isOpenDecrypt=" + isopendecrypt;
        }
        $.ajax({
            url: "getQrCode/?" + req,
            type: "get",
            async: false,
            success: function (data) {
                $('.close').click();
                let txt = "";
                if (data.password == "unset") {
                    txt = "<img src='" + data['imgPath'] + "' style='width: 150px;height: 150px'/><br>" +
                        "链接：<input style='width: 80%;font-size: 14px' value='" + data['url'] + "'/>";
                } else {
                    txt = "<img src='" + data['imgPath'] + "' style='width: 150px;height: 150px'/><br>" +
                        "密码：<input style='width: 80%;font-size: 14px' value='" + data['password'] + "'/><br>" +
                        "链接：<input style='width: 80%;font-size: 14px' value='" + data['url'] + "'/>";
                }
                var option = {
                    title: "分享你的文件",
                };
                window.wxc.xcConfirm(txt, "custom", option);
            }
        });
    }

    /**
     *右键弹出菜单
     */
    $(".files").contextMenu({
        width: 100, // width
        itemHeight: 30, // 菜单项height
        bgColor: "#fff", // 背景颜色
        color: "#333", // 字体颜色
        fontSize: 12, // 字体大小
        hoverBgColor: "#3498db", // hover背景颜色
        target: function (ele) { // 当前元素
            console.log(ele);
        },
        menu: [{ // 菜单项
            text: " 下载",
            callback: function () {
                let id = $('#fileid').html();
                if (id != "") {
                    download(id);
                } else {
                    return;
                }
            }
        },
            {
                text: " 分享",
                callback: function () {
                    //弹出是否加密、失效时间模态框
                    $('.share').click();
                }
            },
            {
                text: " 重命名",
                callback: function () {
                    let id = $('#fileid').html();
                    let name = $('#filename').html();
                    let cur = $('#current').html();
                    let html = $('.flag').children('.main-card').children('.editname').html($('' +
                        "<form id='updateFileNameForm' action='updateFileName' method='post'>" +
                        "<input id='updateFileName' style='line-height:0' name='myFileName' autocomplete='off' type='text' onblur='checkUpdateFile()' value='" + name + "'>" +
                        "<input type='hidden' name='myFileId' value='" + id + "'>" +
                        "<input type='hidden' name='page' value='image'>" +
                        "<input type='hidden' name='cur' value='" + cur + "'>" +
                        "</form>" +
                        ''));
                }
            },
            {
                text: " 删除",
                callback: function () {
                    let id = $('#fileid').html();
                    let location = window.location.href;
                    let strings = location.split("coolcloud");
                    if (id != "") {
                        window.location.href = strings[0] + "coolcloud/deleteFile?fileId=" + id + "&page=image&cur=" + $('#current').html();
                    } else {
                        return;
                    }
                }
            }
        ]

    });

    function checkUpdateFile() {
        var name = $.trim($("#updateFileName").val());
        // var nameReg = /^[^\u4E00-\u9FA5\uF900-\uFA2D\w-_]{2,20}$/;
        // if (!nameReg.test(name)) {
        //   alert("文件夹格式错误！【汉字、字母、数字】");
        //   var location = window.location.href;
        //   window.location.href = location;
        // }else{
        //   $('#updateFileNameForm').submit();
        // }
        if ('' != name) {
            $('#updateFileNameForm').submit();
        } else {
            alert("文件名不能为空");
        }
    }

    function download(id) {
        permission = [[${permission}]];
        if (permission == 2) {
            alert("可能因为你的违规操作，您暂时无法下载文件！");
            return;
        }
        let location = window.location.href;
        let strings = location.split("coolcloud");
        window.location.href = strings[0] + "coolcloud/downloadFile?use=dl&time=" + new Date().getTime() + "&tip=" + Math.random() * 1000000 + "&fId=" + id;
    }

    function closeTip() {
        $.ajax({
            url: "cleanTipMsg", success: function (result) {
                $(".tipmsg").hide();
            }
        });
    }

    function closeTip1() {
        $(".tipmsg1").html("");
        $(".tipmsg1").hide();
    }

    if ('' !== $(".tipmsg").text()) {
        setTimeout(function closeTip() {
            $.ajax({
                url: "cleanTipMsg", success: function (result) {
                    $(".tipmsg").hide();
                }
            });
        }, 2000);
    }
</script>
</body>
</html>
